<template>
  <div class="dt-org-box">
    <div
      :class="{'dt-org-self':true,'dt-org-self-root':nodes.cardType===1,'dt-org-self-cooprate':nodes.cardType===3,'dt-org-self-major':nodes.cardType===4,'dt-org-self-person':nodes.cardType===5,'dt-org-self-leaf':!nodes.children.length,'is-slide':nodes.isSlide&&nodes.cardType!==5}"
      :top="nodes.top">
      <div class="dt-org-line" v-if="nodes.cardType!==1"></div>
      <template v-if="nodes.cardType===5">
        <div class="dt-org-person" @click="showTask(nodes)">
          <div class="dt-org-person-name">
            <b :title="nodes.majorUserName">{{nodes.majorUserName|filterMajorUserName}}</b>
          </div>
          <div class="dt-org-person-value">
            <span>
              <em>总产值</em>
              <i :title="nodes.showOutput?$tools.moneyLower(nodes.output)+'元':''">{{nodes.showOutput?$tools.moneyLower(nodes.output)+'元':'***'}}</i>
            </span>
          </div>
          <div class="dt-org-person-task">
            <span>
              <em>任务数量</em>
              <i>{{nodes.taskCount}}</i>
            </span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="dt-org-title">
          <em v-if="nodes.cardType===2">管理单位</em>
          <em v-if="nodes.cardType===3">合作单位</em>
          <span class="w200" :title="nodes.projectName">{{nodes.projectName}}</span>
          <i class="el-icon-arrow-up" @click="toogleSlide(nodes)"></i>
        </div>
        <div class="dt-org-item" v-if="!nodes.isSlide">
          <p>产值：{{nodes.showOutput?$tools.moneyLower(nodes.output)+'元':'***'}}</p>
          <p>剩余产值：{{nodes.showOutput?$tools.moneyLower(nodes.residueOutput)+'元':'***'}}</p>
          <p>负责人：
            <template v-if="nodes.master.length">
              <span v-for="(item,index) in nodes.master.filter(item => {return item.masterState})" :key="item.userId">{{item.userName}}
                <em
                  v-if="index!==nodes.master.filter(item => {return item.masterState}).length-1&&nodes.master.filter(item => {return item.masterState}).length!==1">；</em>
              </span>
            </template>
            <span v-else>--</span>
          </p>
        </div>
        <el-dropdown class="dt-org-add" placement="bottom-start" trigger="click" @command="createCommand" v-if="nodes.cardType!==4&&nodes.showOutput">
          <i class="el-icon-plus"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{type:'manager',currentProjectId:nodes.id}"><i class="dt-dot-0"></i>添加管理单位</el-dropdown-item>
            <el-dropdown-item :command="{type:'cooperate',currentProjectId:nodes.id}"><i class="dt-dot-1"></i>添加合作单位</el-dropdown-item>
            <el-dropdown-item :command="{type:'major',currentProjectId:nodes.id}" v-if="nodes.cardType!==1"><i
                class="dt-dot-2"></i>添加专业</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown class="dt-org-menu" placement="bottom-start" trigger="click" @command="editCommand"
          v-if="nodes.showOutput&&nodes.cardType!==1&&!nodes.isSlide">
          <i class="el-icon-more"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{type:'edit',currentProjectId:nodes.id}">编辑</el-dropdown-item>
            <el-dropdown-item :command="{type:'delete',currentProjectId:nodes.id}">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="dt-org-slide" v-if="nodes.children.length&&nodes.cardType!==4">
          <i :class="{'el-icon-arrow-up':true,'is-slide':nodes.isChildrenSlide}" @click="toogleChildrenSlide(nodes)"></i>
        </div>
      </template>
    </div>
    <div class="dt-org-children" v-if="nodes.children.length" :class="{'is-last-child':nodes.children.length&&!nodes.children[0].children.length}">
      <template>
        <PmComOrgTree v-for="node in nodes.children" :key="node.id" :nodes="node" @createCommand="createCommand" @editCommand="editCommand"
          @toogleSlide="toogleSlide" @toogleChildrenSlide="toogleChildrenSlide" @showTask="showTask" />
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: ['nodes'],
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid) //用户id
    }
  },
  filters: {
    filterMajorUserName(val) {
      return val.length > 4 ? val.substring(0, 4) + '...' : val
    }
  },
  methods: {
    //创建
    createCommand(command) {
      this.$emit('createCommand', command)
    },
    //编辑/删除
    editCommand(command) {
      this.$emit('editCommand', command)
    },
    //单个节点展开 收缩
    toogleSlide(nodes) {
      this.$emit('toogleSlide', nodes)
      this.$nextTick(() => {
        this.drawVerLine()
      })
    },
    //所有子节点展开 收缩
    toogleChildrenSlide(nodes) {
      this.$emit('toogleChildrenSlide', nodes)
      this.$nextTick(() => {
        this.drawVerLine()
      })
    },
    //任务抽屉
    showTask(nodes) {
      this.$emit('showTask', nodes)
    },
    //画所有竖线
    drawVerLine() {
      $('.dt-org-line').each(function () {
        var $parentSelf = $(this).parent('.dt-org-self'),
          $parentBox = $parentSelf.parent('.dt-org-box'),
          $prevParentBox = $parentBox.prev('.dt-org-box'),
          $prevParentSelf = $prevParentBox.children('.dt-org-self'),
          $grandSelf = $parentBox.parent('.dt-org-children').prev('.dt-org-self'),
          //  isBranch = $parentSelf.hasClass('wkuc-box-branch'),
          height = 0,
          top = 0
        if ($prevParentBox[0]) {
          var topLine1 = $prevParentSelf.offset().top + parseInt($prevParentSelf.attr('top')),
            topLine2 = $parentSelf.offset().top + parseInt($parentSelf.attr('top')),
            topBox2 = $parentSelf.offset().top
          height = topLine2 - topLine1
          top = '-' + (topBox2 - topLine1) + 'px'

          $(this).css({
            height: height,
            top: top
          })
        } else {
          if ($grandSelf[0]) {
            var topLine1 = $grandSelf.offset().top + parseInt($grandSelf.attr('top')),
              topLine2 = $parentSelf.offset().top + parseInt($parentSelf.attr('top'))
            height = Math.abs(topLine2 - topLine1)
            top = 25 //isBranch ? -16 : 25
            $(this).css({
              height: height,
              top: top
            })
          }
        }
      })
    }
  },
  watch: {
    nodes: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.drawVerLine()
        })
      },
      deep: true, //深度监听
      immediate: true
    }
  }
}
</script>
<style scoped>
</style>